import React, { Component,PureComponent } from 'react'
import Child from './Child'

export default class Parent extends PureComponent {

  constructor() {
    super();
    this.state = {
      num: 1,
      showChild:true
    }
    console.log('parent construntor')
  }
// //性能优化
//   shouldComponentUpdate(){
//     if(this.state.num===3){
//       //不执行render函数
//       return false
//     }
//     //执行render函数
//     return true;
//   }

  getSnapshotBeforeUpdate(){
    console.log('getSnapshotBeforeUpdate')
    //如：获取滚动条的y的坐标位置
    return {
      scrollY:50
    }
  }

  render() {
    console.log('parent render')
    return (
      <div id="container">
        parent :{this.state.num}
        <button onClick={
          () => {
            this.setState({
              num: this.state.num + 1,
              name: 'xiaoming'
            })
            //强制更新
            // this.forceUpdate();
          }
        }>更新父组件</button>
        <br></br>
        <button onClick={
          ()=>{
            this.setState({
              showChild:!this.state.showChild
            })
          }
        }>显示/隐藏子组件</button>
        <hr />
        {
          this.state.showChild ?  <Child num={this.state.num}></Child> :''
        }
       
      </div>
    )
  }

  componentDidMount() {
    console.log('componentDidMount')
    console.log(document.getElementById('container').innerHTML)
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate')
    console.log(snapshot);
    console.log(document.getElementById('container').innerHTML)
  }
}
